<template>
  <el-dialog v-model="dialogVisible" width="80%" draggable title="个人信息中心">
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <el-card class="box-card">
            <template v-slot:header>
              <div class="clearfix">
                <span>个人信息</span>
              </div>
            </template>
            <div>
              <div class="text-center">
                <!-- <userAvatar /> -->
                <AvatarEdit
                  @confirm="handleConfirm"
                  v-model:dialog-visible-corpper="dialogVisibleCorpper"
                />
              </div>
              <ul class="list-group">
                <li class="list-group-item">
                  <span>
                    <el-icon><User /></el-icon>
                    <span class="title">用户名称</span>
                  </span>
                  <div class="pull-right">{{ userInfo?.username }}</div>
                </li>
                <li class="list-group-item">
                  <span>
                    <el-icon><UserFilled /></el-icon>
                    <span class="title">真实姓名</span>
                  </span>
                  <div class="pull-right">{{ userInfo?.realname }}</div>
                </li>
                <li class="list-group-item">
                  <span>
                    <el-icon>
                      <component
                        :is="userInfo?.gender == '1' ? 'Female' : 'Male'"
                      />
                    </el-icon>
                    <span class="title">性别</span>
                  </span>
                  <div class="pull-right">
                    {{ userInfo?.gender == '1' ? '女' : '男' }}
                  </div>
                </li>
                <li class="list-group-item">
                  <span>
                    <el-icon><Phone /></el-icon>
                    <span class="title">手机号码</span>
                  </span>
                  <div class="pull-right">{{ userInfo?.mobile }}</div>
                </li>
                <li class="list-group-item">
                  <span>
                    <el-icon><Message /></el-icon>
                    <span class="title">邮箱地址</span>
                  </span>
                  <div class="pull-right">{{ userInfo?.email }}</div>
                </li>
                <li class="list-group-item">
                  <span>
                    <el-icon><Clock /></el-icon>
                    <span class="title">创建时间</span>
                  </span>
                  <div class="pull-right">
                    {{ formatUTC(userInfo?.createdAt as string) }}
                  </div>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card>
            <template v-slot:header>
              <div class="clearfix">
                <span>基本资料</span>
              </div>
            </template>
            <el-tabs v-model="tabsName">
              <el-tab-pane label="基本资料" name="userinfo">
                <user-Infoment @handleModify="modifyInfo" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="resetPwd">
                <reset-pwd @handleModify="modifyPwd" ref="resetPwdRef" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
// 模块引入
import { ref, toRaw } from 'vue'
import { ElIcon, ElNotification } from 'element-plus'
import { UserFilled } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useComponentRef } from '@/components/hooks'
import useLoginStore from '@/store/login'
import ResetPwd from './form/resetPwd.vue'
import UserInfoment from './form/userInfo.vue'
import { formatUTC, localCache, clearEmptyValues } from '@/utils'
import AvatarEdit from '@/components/page/main/avatarEdit/index.vue'
// import type { IProps } from '@/components/types'

defineOptions({
  // 组件名称
  name: 'UserCenter',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})
// 数据声明
const dialogVisible = ref<boolean>(false)
const tabsName = ref<string>('userinfo')
const resetPwdRef = useComponentRef(ResetPwd)
const loginStore = useLoginStore()
const { userInfo } = storeToRefs(loginStore)
// console.log(userInfo?.value?.avatar)

// const avatarResource = computed(
//   () =>
//     userInfo?.value?.avatar ||
//     'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
// )

const dialogVisibleCorpper = ref<boolean>(false)
// const handleUpdateAvatar = () => {
//   dialogVisibleCorpper.value = true
// }
const handleConfirm = (val: any) => {
  console.log(val)

  dialogVisibleCorpper.value = false
}

const setDialogVisible = (val = true) => {
  dialogVisible.value = val
}

/** 修改密码流程 */
const modifyPwd = async (data: any) => {
  // 获取本地缓存中的密码
  const pwd = localCache.get('CACHE_PASSWORD')
  // 如果没有密码，则返回
  if (!pwd) return
  // 打印密码
  // console.log('pwd', pwd)
  // 解构data中的旧密码和新密码
  const { oldPwd, newPwd } = data
  // 如果旧密码不正确，则提示用户
  if (oldPwd !== pwd) {
    ElNotification.info({
      title: '提示',
      message: '旧的密码不正确'
    })
    // 重置密码表单
    resetPwdRef.value?.resetFormClick()
    return
  } else {
    ElNotification.success({
      title: '成功提示',
      message: '密码修改成功'
    })
    // 获取用户id
    // const id = userInfo?.value?._id as string
    // 更新密码
    await loginStore.updateUserInfoAction({ password: newPwd })
    // 重置密码表单
    resetPwdRef.value?.resetFormClick()
    // 退出登录
    await loginStore.logout()
  }
}

/**
 * 个人中心修改用户信息
 * @param data 用户信息
 */
const modifyInfo = (data: any) => {
  if (!data) return
  const dataRaw = toRaw(data)
  const dataClear = clearEmptyValues(dataRaw)
  // const id = userInfo?.value?._id as string
  loginStore.updateUserInfoAction(dataClear)
  setDialogVisible(false)
  ElNotification.success({
    title: '成功提示',
    message: '用户信息修改成功'
  })
}

defineExpose({
  setDialogVisible
})
</script>

<style scoped lang="scss">
.text-center {
  text-align: center;
  // .avatar {
  //   cursor: pointer;
  // }
}
.list-group {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    .title {
      margin-left: 10px;
    }
    .pull-right {
      color: #777;
    }
    & ~ .list-group-item {
      margin-top: 10px;
    }
  }
}
</style>
